<template>
    <el-menu style="height: 600px"
             @select="handleSelect"
             active-text-color="red"
             class="categories"
             default-active="0">
        <el-menu-item index="0">
            <i class="el-icon-menu"></i>
            <span slot="title">全部</span>
        </el-menu-item>

        <el-menu-item :index="item.type.toString()" :key="index" v-for="(item, index) in categories">
            <i class="el-icon-menu"></i>
            <span slot="title">{{item.type_desc}}</span>
        </el-menu-item>

    </el-menu>
</template>

<script>
    export default {
        name: 'SideMenu',
        data() {
            return {
                categories: [],
                type: 0
            }
        },
        mounted() {
            this.loadCategory()
        },
        methods: {
            handleSelect(key, keyPath) {
                this.type = key
                this.$emit('sideSelected')
            },
            loadCategory() {
                this.$axios.get('/furniture/categories')
                    .then(success => {
                        this.categories = success.data.data
                    })
                    .catch(fail => {
                        this.$message({
                            type: 'error',
                            message: '网络连接错误，请稍后重试  ' + fail
                        });
                    })
            }
        }
    }
</script>

<style scoped>
    .categories {
        margin-left: 10%;
        width: 150px;
    }
</style>
